<template>
    <div class="screenshot-container" ref="container">
      <div 
        class="drawing-area"
        @mousedown="startDrawing"
        @mousemove="drawRectangle"
        @mouseup="stopDrawing"
      >
        <!-- 背景内容 -->
        <div class="content">
          <h1>可截图的页面内容</h1>
          <p>在此区域拖动鼠标绘制矩形进行截图</p>
          <p>截图完成后会自动下载</p>
        </div>
        
        <!-- 绘制矩形 -->
        <div 
          v-if="isDrawing"
          class="selection-rectangle"
          :style="{
            left: rectangle.left + 'px',
            top: rectangle.top + 'px',
            width: rectangle.width + 'px',
            height: rectangle.height + 'px'
          }"
        ></div>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue';
  
  const container = ref(null);
  const isDrawing = ref(false);
  const rectangle = ref({
    left: 0,
    top: 0,
    width: 0,
    height: 0
  });
  const startPos = ref({ x: 0, y: 0 });
  
  const startDrawing = (e) => {
    isDrawing.value = true;
    startPos.value = {
      x: e.clientX,
      y: e.clientY
    };
    
    rectangle.value = {
      left: e.clientX,
      top: e.clientY,
      width: 0,
      height: 0
    };
  };
  
  const drawRectangle = (e) => {
    if (!isDrawing.value) return;
    
    rectangle.value = {
      left: Math.min(e.clientX, startPos.value.x),
      top: Math.min(e.clientY, startPos.value.y),
      width: Math.abs(e.clientX - startPos.value.x),
      height: Math.abs(e.clientY - startPos.value.y)
    };
  };
  
  const stopDrawing = async () => {
    if (!isDrawing.value) return;
    isDrawing.value = false;
    
    // 确保矩形有足够的尺寸
    if (rectangle.value.width > 10 && rectangle.value.height > 10) {
      await captureAndDownload();
    }
    
    // 重置矩形
    rectangle.value = { left: 0, top: 0, width: 0, height: 0 };
  };
  
  const captureAndDownload = async () => {
    // 创建一个canvas元素
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    
    // 设置canvas尺寸与选区相同
    canvas.width = rectangle.value.width;
    canvas.height = rectangle.value.height;
    
    // 获取页面截图
    const html2canvas = await import('html2canvas');
    const pageCanvas = await html2canvas.default(container.value);
    
    // 将选区内容绘制到canvas上
    ctx.drawImage(
      pageCanvas,
      rectangle.value.left,
      rectangle.value.top,
      rectangle.value.width,
      rectangle.value.height,
      0,
      0,
      rectangle.value.width,
      rectangle.value.height
    );
    
    // 转换为图片并下载
    const image = canvas.toDataURL('image/png');
    downloadImage(image, 'screenshot.png');
  };
  
  const downloadImage = (dataUrl, filename) => {
    const link = document.createElement('a');
    link.href = dataUrl;
    link.download = filename;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  };
  </script>
  
  <style scoped>
  .screenshot-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
  }
  
  .drawing-area {
    position: relative;
    width: 100%;
    height: 100%;
    cursor: crosshair;
  }
  
  .content {
    padding: 20px;
    height: 100%;
    background-color: #f0f0f0;
  }
  
  .selection-rectangle {
    position: absolute;
    border: 2px dashed #333;
    background-color: rgba(0, 0, 255, 0.1);
    pointer-events: none;
  }
  </style>